<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
          将class为red的元素设置为红色(字体)
         */
        .red {
            color: red;
        }

        /*
          将class为red的div字体大小设置为30px
            交集选择器
              作用: 选中同时符合多个条件的元素,比如符合A又符合B
              语法: 选择器1选择器2选择器n{}
              注意点:
                交集选择器中如果有元素选择器,必须使用元素选择器开头
        */
        div.red {
            font-size: 30px;
        }

        .a.b.c {
            color: blue;
        }

        /*
          选择器分组(并集选择器)
            作用: 同时选择多个选择对应的元素 (符合任何一个条件的都会被选中)
            语法: 选择器1,选择器2,选择器n{}
            #b1,.p1,h1,span,div.read{}
        */
        h1, span {
            color: green;
        }


    </style>
  </head>
  <body>
    <div class="red">我是div</div>

    <p class="red">我是p元素</p>

    <div class="red a b c">我是div2</div>

    <h1>标题</h1>

    <span>哈哈</span>
  </body>
</html>
